<template>
	<view class="payment">
		<!-- 这里为计算属性 -->
		<view class="money"><text>{{props.TotalPrice}}</text>USDT</view>
		<ProButton class="btn" @click="LJGM">
			<template v-slot:text>
				<view>立即购买</view>
			</template>
		</ProButton>

		<!-- 键盘 -->
		<KeyBoard :ShowPayment="ShowPayment" @closePaySuccess="closePaySuccess">
			<template v-slot:verifyBtn>
				<view @click="complete">确认</view>
			</template>
		</KeyBoard>

		<!-- 支付成功展示 -->
		<PaymentSuccess :statePay="statePay" @closePaySuccess="closePaySuccess">
			<template v-slot:content>
				<view class="SuccessTip">支付成功</view>
				<view>您成功购买{{props.proName}}*{{props.num}}</view>
				<view class="viewOrder">
					<van-button color="#00D0B9" style="background:none;" plain @click="goOtherPage">返回详情页</van-button>
					<van-button color="#00D0B9" @click="CloseLayer">查看订单(3s)</van-button>
				</view>
			</template>
		</PaymentSuccess>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { useStore } from 'vuex'
	import ProButton from '@/components/product/ProButton/index.vue'
	import KeyBoard from '@/components/product/KeyBoard/index.vue'
	import PaymentSuccess from '@/components/product/PaymentSuccess/index.vue'
	import { paymentOrder } from '@/api/orderList'
	// import { createOrder } from '@/api/orderList'
	const store = useStore()
	// 接受传过来的数据
	const props = defineProps({
		TotalPrice: Number,
		num: Number,
		proName: String
	})
	// 键盘窗口开关
	let ShowPayment = ref<boolean>(false)
	// 支付成功窗口开关
	let statePay = ref<boolean>(false)
	// 立即购买创建订单时间
	const LJGM = async () => {
		ShowPayment.value = true
		let date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
		let hours = date.getHours();
		let minutes = date.getMinutes();
		let seconds = date.getSeconds();
		let fullDateStr = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
		// console.log(fullDateStr);
		store.commit('saveTimeFn', fullDateStr)

		// 点击购买按钮创建订单
		store.dispatch('getOrderData', {
			count: "1",
			code: "000001",
			orderType: "1",
			price: "1000",
			freightPrice: "0",
			receiverUsername: "",
			areaCode: "",
			mobile: "",
			zipCode: "",
			country: "",
			detailAddress: "",
			totalPrice: "1000"
		})
	}
	// 键盘的确认按钮回调
	const complete = async () => {
		// console.log(props,store.state.KeyValue,1111)
		if (store.state.KeyValue === "") return;
		const res = await paymentOrder({
			totalPrice: props.TotalPrice,
			payPassword: store.state.KeyValue,
			orderNo: store.state.product.orderNo
		})
		if(res.code==200){
			statePay.value=true
		}else{
			statePay.value=false
		}
		console.log(res,1122)
		// console.log(store.state.KeyValue)
		// statePay.value = false // 支付成功显示
		// 支付成功窗口显示出来的时候保存支付时间
		if (statePay.value === true) {
			let date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			let hours = date.getHours();
			let minutes = date.getMinutes();
			let seconds = date.getSeconds();
			let fullDateStr = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
			store.commit('savePaymentTimeFn', fullDateStr)
		}else{
			alert('密码错误，请重新输入')
		}
		store.state.KeyValue = "";
	};
	// 关闭支付成功窗口
	const closePaySuccess = (date : any) => {
		// console.log(date)
		if (date.PopupName === 'statePay') {
			statePay.value = date.PopupState
			ShowPayment.value = false
		} else if (date.PopupName === 'ShowPayment') {
			ShowPayment.value = date.PopupState
			store.commit('replaceDataFn', props.num)
			// 关闭键盘支付的时候跳转到待付款页面
			uni.navigateTo({
				url: '/subdue/duePag/index'
			})
		}
	}
	// 返回详情页
	const goOtherPage = () => {
		statePay.value = false
		ShowPayment.value = false
		// 关闭订单弹出层
		store.commit('EditShowBottom', false)
		// console.log(props.num)
		store.commit('replaceDataFn', props.num)
	}
	// 关闭掉支付的窗口
	const CloseLayer = () => {
		if (store.state.title === '寄回') {
			uni.navigateTo({
				url: '/subdue/wait/index'
			})
		} else if (store.state.title === '托管') {
			uni.navigateTo({
				url: '/subdue/closeTheDeal/index'
			})
		} else if (store.state.title === '设备兑换券') {
			uni.navigateTo({
				url: '/subdue/closeDeal/index'
			})
		}
		statePay.value = false
		ShowPayment.value = false
		// 关闭订单弹出层
		store.commit('EditShowBottom', false)
		store.commit('replaceDataFn', props.num)
	}
</script>

<style lang="scss" scoped>
	.orderTitle {
		position: relative;
		width: 91%;
		height: 97px;
		color: #fff;
		text-align: center;
		line-height: 97px;
		margin: 0 auto;
		font-size: 32px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.payment {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 92%;
		height: 112px;
		padding: 0 4%;
		background-color: #121317;
		border-top: 1px solid gray;
		font-size: 28px;
		color: #fff;

		.money>text {
			font-size: 40px;
		}

		.btn {
			width: 280px;
			margin: 0;
			font-size: 28px;
			color: rgba(18, 19, 23, 1);
			font-weight: bold;
			border-radius: 16px;
			background: linear-gradient(to right, rgba(6, 255, 221, 1), rgba(78, 71, 255, 1));
		}
	}

	.viewOrder {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 100px;
	}

	.SuccessTip {
		font-weight: bold;
		font-size: 40px;
		margin-bottom: 32px;
	}
</style>